<template lang="pug">
.dashboard-card
  .dashboard-card-title
    span.title {{ title }}
    slot(name="right")
  .dashboard-card-content
    slot
</template>

<script setup name="DashboardCard">
const props = defineProps({
  title: {
    type: String,
    default: ''
  }
});
</script>
<style lang="scss">
.dashboard-card {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient( 135deg, #0F2F3B 0%, rgba(0,32,35,0.53) 100%);
  box-shadow: inset 0px 9px 14px 0px #05555D;
  &-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    line-height: 32px;
    padding-left: 30px;
    &:before {
      content: '';
      width: 100%;
      max-width: 460px;
      height: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      background: url('../../assets/images/common/dashboard_card_title.png')
        left bottom no-repeat;
      background-size: 100% 100%;
      z-index: 1;
    }
    .title {
      font-size: 18px;
      font-weight: 600;
      font-family: Source Han Sans, Source Han Sans;
      color: #ffffff;
      z-index: 2;
    }
    .svg-icon {
      cursor: pointer;
    }
  }
  &-content {
    height: calc(100% - 32px);
    position: relative;
    overflow: hidden;
    padding: 12px 8px 8px;
  }
}
</style>
